import React ,{useEffect,useState}from 'react'
import { ProductCard, Tag, Button, ActionBar } from 'react-vant';
import {useLocation,useParams,useNavigate} from 'react-router-dom'
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import {useDispatch} from 'react-redux'
interface list{
  title:string,
  name:string,
  id:string,
  img:string,
  list:list[],
  sl:number,
  jg:number,
}
export default function Xq() {
  const Location=useLocation()
  const Navigate=useNavigate()
  const Dispatch=useDispatch()
  const Params=useParams()
  const [a,b]=useState<list>()
  useEffect(()=>{
    b(Location.state as list)    
  },[])
  console.log(a);
  const shop=()=>{
    console.log(1);
    Navigate('/index/gwc')
  }
  const add=()=>{
    console.log(1);
    Dispatch({
      type:"add",
      payload:a
    })
  }
  return (
    <div>Xq     
          <ProductCard
      num={a&&a.sl}
      price={a&&a.jg}
      desc={a&&a.sl}
      title={a&&a.title}
      thumb={a&&a.img}
    />
     <div className='demo-action-bar'>
      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} text="客服" onClick={() => console.log('chat click')} />
        <ActionBar.Icon icon={<CartO />} text="购物车" onClick={() =>add()} />
        <ActionBar.Icon icon={<ShopO />} text="店铺" onClick={() => console.log('shop click')} />
        <ActionBar.Button type="danger" text="立即购买" onClick={() => shop()} />
      </ActionBar>
    </div>
    </div>
  )
}
